body, #content-container{
    background-color: @body-bg;
    color: @body-color;
}

#container.boxed-layout{
    background-color: darken(@body-bg, 4%);
}


.page-header {
    color: lighten(@body-color, 17%);
}

a{
    color: @link-color;
    &:hover,
    &:focus{
        color: @link-hover-color;
    }
}

/* SEARCHBOX */
/*======================================*/
.searchbox {
    .custom-search-form{
        .input-group-btn{
            &:before{
                background-color: @state-active-bg;
            }
        }
    }
}


/* SCROLLBAR */
/*======================================*/
.pace{
    .pace-progress{
        background-color: darken(@state-active-bg, 15%);
    }
    .pace-progress-inner {
        box-shadow: 0 0 10px @state-active-bg,0 0 5px @state-active-bg;
    }
    .pace-activity {
        background-color: @state-active-bg;
    }
}

.nano > .nano-pane > .nano-slider{
    &:extend(.pace .pace-progress);
}


/* NAVBAR
/*=====================================*/
#navbar{
    background-color: @body-bg;
}
& when (lightness(@mainnav-bg) < 70%) {
    #navbar-container{
        box-shadow: 0 2px 0px -1px rgba(0,0,0,.05);
    }
}

& when (lightness(@mainnav-bg) >= 70%) and (lightness(@navbar-bg) >= 70%)  {
    #navbar-container{
        box-shadow: 0 2px 0px -1px darken(@body-bg, 2.5%);
    }
}
.navbar-header{
    background-color: @brand-bg-overlay
}

.navbar-content{
    background-color: @navbar-bg;
    box-shadow: inset -4px 0 0 0 @state-active-bg
}


/* BRAND LOGO & TEXT
/*====================================*/
.navbar-brand{
    background-color: @brand-bg;
    color: @mainnav-hover-color;
    &:hover, &:focus{
        color: @mainnav-hover-color;
    }
}

/* NAVIGATION */
/*======================================*/
& when (lightness(@mainnav-bg) >= 70%) {
    #mainnav-container{
        box-shadow: 0 0 0 1px darken(@body-bg, 3.5%);
    }
}

/* NAVBAR ICON & BUTTON */
/*======================================*/
.navbar-icon-color{
    color: darken(@navbar-color,15%)
}

.navbar-top-links{
    > li{
        > a {
            color: @navbar-color;
            &:not(.mainnav-toggle) > i{
                color: lighten(@navbar-color, 40%)
            }
            &:focus{
                background-color: transparent;
                &:not(.mainnav-toggle) > i{
                     &:extend(.navbar-icon-color);
                }
            }
            &:hover{
                background-color: darken(@navbar-bg, 5%);
                color: darken(@navbar-color,15%);
                &:not(.mainnav-toggle) > i{
                     &:extend(.navbar-icon-color);
                }
            }
        }
    }
    > .open{
        > a, > a:focus{
            background-color: darken(@navbar-bg, 5%);
            color: @navbar-color;
        }
    }
    .tgl-menu-btn{
        > a, > a:hover, > a:focus{
            color: @brand-color
        }
    }
}

/* NAVBAR RESPONSIVE */
/*======================================*/
@media (min-width: 768px){
    #navbar{
        background-color: transparent
    }

    .navbar-header{
        background-color: transparent;
        &:before{
            background-color: @brand-bg-overlay
        }
    }
    #navbar-container{
        background-color: @navbar-bg
    }
    #container.mainnav-in .brand-title,
    #container.mainnav-sm .brand-title,
    #container.mainnav-lg .brand-title{
        color: @brand-color;
    }
    .navbar-top-links{
        .tgl-menu-btn{
            position: static;
            > a, > a:hover{
                color: @navbar-color
            }
            > a:focus{
                background-color: transparent;
                color: @navbar-color
            }
        }
    }
}



/* NAVIGATION */
/*======================================*/
#mainnav{
    background-color: @mainnav-bg;
    .list-header{
        color: darken(@mainnav-color,15%)
    }
}




/* NAVIGATION MENU */
/*======================================*/

#mainnav-menu{
    a {
        color: @mainnav-color;
    }
    >li{
        >a{
            &:hover, &:active{
                color: @mainnav-hover-color
            }
            &.hover{
                color: @mainnav-hover-color;
                background-color: lighten(@mainnav-bg,3%);
                box-shadow: inset 4px 0 0 0 @mainnav-active-state
            }
        }
    }
    > .active-link{
        >a, >a:hover{
            color: @mainnav-hover-color;
            box-shadow: inset 4px 0 0 0 @mainnav-active-state;
        }
    }
    > .active-sub {
        > a, >a:hover{
            color: @mainnav-hover-color
        }
    }
    > .active {
        background-color: darken(@mainnav-bg, 3%);
        .active{
            background-color: darken(@mainnav-bg, 5%);
        }
    }
    ul{
        a{
            &:hover{
                color: @mainnav-hover-color;
            }
        }
        ul{
            a{
                &:hover{
                    color: @mainnav-hover-color;
                }
            }
        }
        .active-link{
            a{
                color: @mainnav-hover-color;
                box-shadow: inset 4px 0 0 0 @mainnav-active-state;
            }
        }
    }
}




.menu-popover{
    .sub-menu{
        ul{
            a{
                &:extend(#mainnav-menu ul a);
                &:hover{
                    &:extend(#mainnav-menu ul a:hover);
                }
            }
            ul{
                &:extend(#mainnav-menu ul ul);
                a:hover{
                    &:extend(#mainnav-menu ul ul a:hover);
                }
            }
            .active-link{
                a{
                    &:extend(#mainnav-menu ul .active-link a);
                }
            }
        }
    }
}


& when (@mainnav-collapse = true){
    #container.mainnav-sm{
        #mainnav-menu{
            a:hover{
                box-shadow: inset 4px 0 0 0 @mainnav-active-state;
            }
            >.active{
                &-link, &-sub{
                    > a, a:hover{
                        background-color: @mainnav-active-state;
                    }
                }
            }
        }
    }
}



/* NAVIGATION - SHORTCUT BUTTONS */
/*======================================*/
#mainnav-shortcut{
    .shortcut-grid{
        color: @mainnav-hover-color;
    }
}




 /* NAVIGATION - WIDGET */
/*======================================*/
.mainnav-widget{
    background-color: rgba(0,0,0,.05);
    color: @mainnav-color;
}





& when (@mainnav-collapse = true){
    @media (min-width: 768px){
        #container.mainnav-sm{
            .shortcut-grid:hover{
                box-shadow: inset 4px 0 0 0 @mainnav-active-state;
            }
            .shortcut-grid:hover,
            .popover.mainnav-shortcut{
                background-color: lighten(@mainnav-bg, 3%);
                color: @mainnav-hover-color;
            }
            #mainnav-menu{
                .active-link, .active-sub{
                    > a{
                        color: @state-active-color;
                    }
                }
            }
            #mainnav{
                .mainnav-widget{
                    >.show-small{
                        a{
                            color: @mainnav-color;
                            &:hover{
                                color: @mainnav-hover-color;
                                box-shadow: inset 4px 0 0 0 @mainnav-active-state;
                            }
                        }
                    }
                    .hover{
                        color: @mainnav-hover-color;
                        background-color: lighten(@mainnav-bg, 3%);
                    }
                }
            }

        }

        /* NAVIGATION - POPOVER  */
        /*======================================*/
        .menu-popover{
            .sub-menu{
                ul{
                    background-color: darken(@mainnav-bg,3%);
                    ul{
                        background-color: darken(@mainnav-bg,5%);
                    }
                    li{
                        >a{
                            color: @mainnav-hover-color;
                        }
                    }
                }
            }
            .single-content{
                color: @mainnav-hover-color;
                background-color: lighten(@mainnav-bg, 3%);
            }
            &.popover{
                background-color: darken(@mainnav-bg,2%);
                color: @mainnav-hover-color;
            }
            >.popover-title{
                background-color: lighten(@mainnav-bg, 3%);
                color: @mainnav-hover-color;
            }
            .mainnav-widget-content{
                background-color: lighten(@mainnav-bg, 3%);
            }
        }
    }
    .mainnav-sm .popover.mainnav-shortcut{
        background-color: darken(@mainnav-bg,2%);
        color: @mainnav-hover-color;
    }
}




/* NAVIGATION - OFFCANVAS */
/*======================================*/
@media (min-width: 768px){
    #container.mainnav-in.easeInBack #mainnav-container{
        box-shadow: -20px 0 0 0 @mainnav-bg;
    }
    #container.mainnav{
        &-in{
            &.easeOutBack #mainnav-container{
                &:extend(#container.mainnav-in.easeInBack #mainnav-container);
            }
            &.easeInOutBack #mainnav-container{
                &:extend(#container.mainnav-in.easeInBack #mainnav-container);
            }
            &.jumping #mainnav-container{
                &:extend(#container.mainnav-in.easeInBack #mainnav-container);
            }
        }
        &-out{
            .brand-title{
                background-color: transparent;
                color: @brand-color-overlay;
            }
            &.easeInBack #mainnav-container{
                &:extend(#container.mainnav-in.easeInBack #mainnav-container);
            }
            &.easeOutBack #mainnav-container{
                &:extend(#container.mainnav-in.easeInBack #mainnav-container);
            }
            &.easeInOutBack #mainnav-container{
                &:extend(#container.mainnav-in.easeInBack #mainnav-container);
            }
            &.jumping #mainnav-container{
                &:extend(#container.mainnav-in.easeInBack #mainnav-container);
            }
        }
    }
}


/* ASIDE */
/* ===================================== */
#container {
    #aside-container{
        background-color: @aside-bright-bg;
    }
    #aside {
        .list-link li a:not(.btn){
            color: darken(@aside-dark-color,18%);
            &:hover{
                color: @aside-dark-color;
            }
        }
    }
}

#aside{
    background-color: @aside-dark-bg;
    color: @aside-dark-color;
    a:not(.btn):not(.btn-link){
        color: inherit;
    }
    .bord-all,
    .bord-top,
    .bord-btm,
    .bord-left,
    .bord-rgt,
    .bord-hor,
    .bord-ver,
    .list-divider{
        border-color: lighten(@aside-dark-bg,3%);
    }
    .btn-link{
        color: @aside-dark-color;
    }
    .text-muted{
        color: lighten(@aside-dark-bg,35%);
    }
}


& when (@aside-tabs){

    /* Aside with tabs */
    /* ===================================== */
    #aside{
        #aside-container &{
            .nav-tabs{
                li:not(active){
                    a{
                        background-color: darken(@aside-dark-bg,3%);
                    }
                }
            }
        }
        #container.aside-bright &{
            .nav-tabs {
                li:not(.active) a{
                    background-color: darken(@aside-bright-bg,5%)
                }
            }
        }
    }
}


@media (min-width: 768px){
    #aside{
        background-color: @aside-dark-bg;
    }
    #container{
        #aside-container{
            background-color: @aside-bright-bg;
        }
    }
}


/* ASIDE : BRIGHT COLOR THEMES */
/* ===================================== */
#container{
    &.aside-bright{
        #aside{
            background-color: @aside-bright-bg;
            border-color: darken(@aside-bright-bg, 5%);
            color: @aside-bright-color;
            & when (lightness(@mainnav-bg) >= 70%){
                border: 1px solid darken(@body-bg, 7.5%);
            }
            & when (lightness(@body-bg) >= 95%){
                border: 1px solid darken(@body-bg, 7.5%);
            }
            .text-light{
                color : @body-color;
            }
            .bord-all,
            .bord-top,
            .bord-btm,
            .bord-lft,
            .bord-rgt,
            .bord-hor,
            .bord-ver,
            .list-divider{
                border-color: darken(@aside-bright-bg, 3%);
            }
            .text-muted{
                color : lighten(@body-color,30%);
            }
            .progress{
                background-color: darken(@aside-bright-bg, 10%);
            }
            .list-link li a:not(.btn){
                color: lighten(@aside-bright-color,5%);
                &:hover{
                    color: @aside-bright-color
                }
            }
            a:not(.btn){
                color: @aside-bright-color;
                &:hover, &:focus{
                    color: darken(@aside-bright-color,10%);
                }
            }
            .btn-link{
                color: @aside-bright-color;
            }
        }

    }

}



/* FOOTER */
/*======================================*/
#container.footer-fixed{
    #footer{
        background-color: @footer-bg;
        color: @footer-color;
    }
}



/* BORDER */
/*======================================*/
.bord-no{border: 0 !important}
.bord-all{border: 1px solid @border-color-base}
.bord-top{border-top: 1px solid @border-color-base}
.bord-btm{border-bottom: 1px solid @border-color-base}
.bord-lft{border-left: 1px solid @border-color-base}
.bord-rgt{border-right: 1px solid @border-color-base}
.bord-ver{
    border-top: 1px solid @border-color-base;
    border-bottom: 1px solid @border-color-base
}
.bord-hor{
    border-right: 1px solid @border-color-base;
    border-left: 1px solid @border-color-base
}




/* TIMELINE */
/*======================================*/
& when(@timeline = true) {
    .timeline {
        background-color: @timeline-bg;
        color: @timeline-color;
        &:before, &:after{
            background-color: lighten(@timeline-border-color, 12%);
        }
    }
    .timeline-time{
        background-color: @timeline-bg;
        color: lighten(@timeline-color, 20%);
    }
    .timeline-icon {
        box-shadow: 0 0 0 7px @body-bg;
         &:empty {
            background-color: @timeline-border-color;
        }
    }
    .timeline-label {
        background-color: @light-bg;
        border: 1px solid @border-color-base;
        &:before{
            border-right: 10px solid darken(@border-color-base,1%);
        }
        &:after{
            border-right: 9px solid @light-bg;
        }
    }
    .panel {
        .timeline-label{
            background-color: darken(@light-bg, 3%);
            border: 1px solid darken(@border-color-base, 2.5%);
            &:before{
                border-right-color: darken(@border-color-base, 2.5%);
            }
            &:after{
                border-right-color: darken(@light-bg, 3%);
            }
        }
    }

    @media (min-width: 768px){
        .two-column.timeline{
            .timeline-entry:nth-child(even){
                .timeline-label{
                    &:before{
                        border-left: 10px solid darken(@border-color-base,1%);
                    }
                    &:after{
                        border-left: 9px solid @light-bg;
                    }
                }
            }
        }
    }
}





/* FORM WIZARD */
/*======================================*/
& when (@form-wizard = true){
    // Black & white icons
    .wz-icon-bw li {
        &.active ~ li > a .icon-wrap{
            color: @body-color;
            background-color: rgba(0,0,0,.17);
        }
        &:not(.active) > a p {
            color: @body-color !important;
        }
    }
}





 /* FORM CONTROL  */
/*======================================*/
& when (@form-control = true) {
    .form-control{
        &:focus{
            border-color: @state-active-bg;
        }
    }
}



/* LIST GROUP */
/*======================================*/
& when (@list-group = true) {
    .list-group-item{
        &.active{
            &, &:hover, &:focus{
                background-color: @state-active-bg;
                border-color: @state-active-bg;
                color: @state-active-color;
                .list-group-item-text{
                    color: @state-active-color;
                }
            }
        }
    }
}



 /* DROPDOWN */
/*======================================*/
& when (@dropdown = true) {
    .dropdown-menu{
        >li{
            >a{
                &:hover{
                    background-color: @state-active-bg;
                    color: @state-active-color
                }
            }
        }
    }
}



/*======================================*/
/* PAGER */
/*======================================*/
& when (@pager = true) {
    .pager{
        li{
            >a{
                &:hover,&:focus{
                    background-color: @light-bg;
                    border-color: @state-active-bg;
                    color: @state-active-bg;
                    box-shadow: inset 0 0 1px @state-active-bg;
                    z-index: 2;
                    .transition(border-color, .3s)
                }
            }
        }
    }
}




/*======================================*/
/* PAGINATION */
/*======================================*/
& when (@pagination = true){
    .pagination{
        >li{
            a {
                &:hover,
                &:focus{
                    border-color: @state-active-bg;
                    color: @state-active-bg;
                    box-shadow: inset 0 0 1px @state-active-bg;
                }
            }
        }
        >.active{
            >a, >span, >a:hover, >span:hover, >a:focus, >span:focus{
                background-color: @state-active-bg;
                border-color: @state-active-bg;
            }
        }
    }
}




/* TAB */
/*======================================*/
& when (@tabs = true){
    .tab{
        &-base{
            .tab-content{
                .tab-footer{
                    background-color: lighten(@body-bg,3%);
                    color: @body-color;
                    border-color: lighten(@body-bg,1%);
                }
            }
            .nav-tabs{
                >li:not(.active){
                    >a{
                        &:hover{
                            border-color: @state-active-bg;
                        }
                    }
                }
            }
        }

    }
    .tab-stacked{
        &-left{
            &.tab-base{
                .nav-tabs{
                    >li:not(.active){
                        a{
                            &:hover{
                                border-color: @state-active-bg;
                                border-right-color: transparent;
                            }
                        }
                    }
                }
            }
        }
        &-right{
            &.tab-base{
                .nav-tabs{
                    >li:not(.active){
                        a{
                            &:hover{
                                border-color: @state-active-bg;
                                border-left-color: transparent;
                            }
                        }
                    }
                }
            }
        }
    }
}



/* BUTTONS */
/*======================================*/
.btn-trans{
    color: lighten(@body-color, 20%);
}





/* PANELS */
/*======================================*/
.panel{
    & when (lightness(@body-bg) >= 95%) {
        &:not(.panel-colorful){
            border: 1px solid darken(@body-bg, 1.5%);
        }
    }
}
.panel-footer{
    background-color: lighten(@body-bg,3%);
    color: @body-color;
    border-color: lighten(@body-bg,1%);
    position: relative
}
